import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  Button,
  Image,
  TextInput,
  Alert,
  AsyncStorage,
} from 'react-native';

import Icon from 'react-native-vector-icons/FontAwesome';

import EditView from './EditView';
import LoginButton from './LoginButton';
import { Actions } from 'react-native-router-flux';


export default class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userName:'',
      passWord:''
    }
  }

  onPressCallback = () => {
    // Alert.alert('111');
    // Alert.alert('用户名和密码不能为空')
    console.log(this.state.userName);
    console.log(this.state.passWord);

    if (this.state.userName != '' && this.state.passWord != '') {
      this._storeData()
    } else {
      global.toast('用户名和密码不能为空')
      // Alert.alert('用户名和密码不能为空')
    }
  }
  _storeData = async () => {
    try {
      await AsyncStorage.setItem('userName', this.state.userName);
      Actions.home();
    } catch (error) {
      // Error saving data
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.imageBox}>
          <Image source={require('../../images/logo.png')}/>
        </View>
        <View style={{marginTop:140}}>
          <EditView
            name='输入手机号'
            onChangeText={(text)=>this.state.userName=text}
          />
          <EditView
            name='输入密码'
            onChangeText={(text)=>this.state.passWord=text}
          />
          <LoginButton
            name='登录'
            onPressCallback={this.onPressCallback}
          />
          <Text style={{color:"#4A90E2",textAlign:'center',marginTop:10}}>忘记密码</Text>
        </View>
      </View>
    )
  }
}



const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 30,
    backgroundColor:'#fff',
  },
  imageBox: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'flex-start',
    height: 100,
    marginTop:1,
  }
})
